<template>
  <div class="good-detail main hasHeader">
    <footer-good></footer-good>
    <div class="ui-icon-return"
     onclick="history.back();">
      <i class="icon-return"></i>
    </div>
    <ul class="ui-tab bd-bottom">
      <li class="tab-item"
       :class="{'active':activeIndex==0}"
       @click="tab(0)">商品</li>
      <li class="tab-item"
       :class="{'active':activeIndex==1}"
        @click="tab(1)">详情</li>
      <li class="tab-item"
        :class="{'active':activeIndex==2}"
       @click="tab(2)">评价</li>
    </ul>
    <div class="swiper-container tab-contents">
      <ul class="swiper-wrapper">
        <li class="tab-content-baseInfo swiper-slide">
          <base-info></base-info>
        </li>
        <li class="tab-content-desc swiper-slide">
          <detail></detail>
        </li>
        <li class="tab-content-rates swiper-slide">
          <rates></rates>
        </li>
      </ul>
    </div>
    <actionsheet-cnt></actionsheet-cnt>
  </div>
</template>
<script>
import BaseInfo from "./BaseInfo"
import Detail from "./Detail"
import Rates from "./Rates"
import FooterGood from "./FooterGood"
import ActionsheetCnt from "./ActionsheetCnt"
export default {
  components: {
    BaseInfo, Rates, Detail, 
    FooterGood, ActionsheetCnt
  },
  data() {
    return {
      swiper: {}
    }
  },
  computed: {
    activeIndex() {
      return this.$store.state.good.activeIndex;
    }
  },
  watch: {
    'activeIndex' :function(val) {
      this.swiper.slideTo(this.activeIndex);
    }
  },
  methods: {
   tab(index) {
      this.$store.commit('setActiveIndex',index)
   }
  },
  created() {
    this.$store.dispatch('getGoodDetail');
  },
  mounted() {
    this.swiper = new Swiper(".swiper-container.tab-contents",{
      observer: true,
      onSlideChangeEnd: (swiper) => {
        this.$store.commit('setActiveIndex',swiper.activeIndex);
      }
    })
  }
}
</script>
<style lang="less">
.swiper-slide{
  height: 0;
}
.swiper-slide.swiper-slide-active{
  height: auto;
}
.icon-return{
  display: inline-block;
  vertical-align: middle;
  width: .32rem;
  height: .32rem;
  background: no-repeat center center;
  background-image: url(../../../static/imgs/icon-return.png);
  background-size: 80% auto;
}
.ui-icon-return{
  position: fixed;
  z-index: 300;
  left: .05rem;
  top: 0;
  height: .44rem;
  line-height: .44rem;
}
.good-detail{
  margin-bottom: .49rem;
  background-color: rgb(240,240,240);
  .ui-tab{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    height: .44rem;
    background-color: #fff;
    text-align: center;
    .tab-item{
      display: inline-block;
      border-bottom: 2px solid transparent;
      color: #777;
      font-weight: 700;
      font-size: .16rem;
      box-sizing: border-box;
      height: .44rem;
      line-height: .44rem;
      text-align: center;
      margin: 0 .2rem;
    }
    .tab-item.active{
      color: #ff6900;
      border-color: #ff6900;
    }
  }
}
.tab-content-desc{
  table{
    img{
      width: 3.2rem;
    }
  }
}
.ui-form{
    background-color: #fff;
    margin: .1rem 0;
    i{
        vertical-align: sub;
    }
}
.ui-form-item{
    margin-left: .15rem;
    padding-right: .15rem;
}

</style>
